<template>
 <div>
    <el-tag
    >成都恒容</el-tag>
    <el-button type="text" size="small" @click="dialogVisible = true">添加用户</el-button>
    <!-- //添加弹出框 -->
     <el-dialog title="提示" :visible.sync="dialogVisible" >
       <el-form  label-width="80px">
       <el-form-item label="姓名">
         <el-input v-model="name"></el-input>
       </el-form-item>
       <el-form-item label="手机号">
         <el-input v-model="tel"></el-input>
       </el-form-item>
       <el-form-item label="性别">
         <el-input v-model="sex"></el-input>
       </el-form-item>
</el-form>
       <span slot="footer" class="dialog-footer">
         <el-button @click="dialogVisible = false">取 消</el-button>
         <el-button type="primary" @click="addUserInfo" > 确 定</el-button>
         <!-- @click="dialogVisible = false" -->
       </span>
     </el-dialog>
    <el-table
    :data="userxList"
    style="width: 100%">
    <el-table-column
      type="index"
      width="100">
    </el-table-column>
    <el-table-column
      property="userId"
      label="工号"
      width="250">
    </el-table-column>
    <el-table-column
      property="name"
      label="姓名"
      width="250"
      >
    </el-table-column>
         <el-table-column
      property="tel"
      label="手机号"
      width="250"
      >
         </el-table-column>
         <el-table-column
          property="sex"
          label="性别"
          width="180"
      >
     </el-table-column>
    <el-table-column
      label="操作"
      width="250">
      <template scope="scope">
     <el-button type="text" v-if="!updateDetail"  @click="updateInfoInit(scope.row)">编辑</el-button>
        <el-button type="text"  @click="delToggle(scope.row.userId)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- //编辑弹出框 -->
 <el-dialog :visible.sync="updateDetail" append-to-body>
    <el-form  label-width="80px">
       <el-form-item label="姓名" slot-scope>
         <el-input v-model="userxListForm.name" ></el-input>
       </el-form-item>
       <el-form-item label="手机号" slot-scope>
         <el-input v-model="userxListForm.tel"></el-input>
       </el-form-item>
       <el-form-item label="性别" slot-scope>
         <el-input v-model="userxListForm.sex"></el-input>
       </el-form-item>
</el-form>
      <span slot="footer" class="dialog-footer">
         <el-button @click="updateDetail=false">取 消</el-button>
         <el-button type="primary" @click="saveInfo" >保存</el-button>
       </span>
 </el-dialog>
  </div>
</template>
<script>
import request from '../api/request.js'
  export default {
    data() {
      return {
        tableData: [],
        updateDetail:false,
        userxListForm:{
          name:"",
          tel:"",
          sex:"",
        },
        userxList:[],
        dialogVisible: false,
        name:'',
        tel:'',
        sex:''
      }
    },
    created() {
    this.getCompanyList()
  },

    methods: {
      updateInfoInit(data){
        this.updateDetail=true,
        this.userxListForm.name = data.name;
        this.userxListForm.tel= data.tel;
        this.userxListForm.sex = data.sex;
        this.userxListForm.userId= data.userId;
        console.log(data.sex)
        
      },
      getCompanyList(data){
          request({
              url:'/third/getAllCompany',
              method:'get'
          }).then(res => {
            console.log(res)
              var userxList =res.data[0].userxList
              this.userxList = userxList
          }).catch(err => {
            console.log(err)
          })
      },
      delToggle(id){
        this.$confirm('确定删除此司机信息？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
      request({
        method:"post",
        url: '/user/deleteUser',
        data:{
            'userId': id
            }
        }).then(res=>{
            // console.log(res)
           this.$confirm('删除成功')
           this.getCompanyList()
          //  this.reload()
          }).catch(err => {
              console.log(err)
          })
       })
      },
      addUserInfo(){
          var that = this
          var user = {
                'name': that.name,
                'tel': that.tel,
                'sex': that.sex,
                'userId':that.userId
          }
          request({
              url:'/user/insetUser',
              method:'post',
              data: {'user': user}
          }).then(res => {
              console.log(res)
               that.$confirm('添加成功')
                that.getCompanyList()
          //  this.reload()
          }).catch(err => {
          })
      },
      saveInfo(){
          request({
              url: '/user/updateUserInfo',
              method:'post',
              data: {
                  'user': this.userxListForm
              }
          }).then(res => {
            this.$confirm('编辑成功')
            // this.reload()
            this.getCompanyList()
              console.log(res)
          }).catch(err => {
              console.log(err)
          })
      }
     
    }
  }
</script>